<template>
  <el-container class="datasource_container">
    <el-header>
      <h1>数据源列表</h1>
    </el-header>

    <el-main class="main_layout">
      <el-table  height="100%" :data="tableData">
        <el-table-column type="expand">
          <template slot-scope="pros">
            <el-form label-width="150px" size="mini">


              <el-form-item label="数据源连接字符串">{{pros.row.datasourceUrl}}</el-form-item>

              <el-form-item label="数据源驱动类名">{{pros.row.datasourceDriver}}</el-form-item>

              <el-form-item label="数据源描述">{{pros.row.datasourceDesc}}</el-form-item>

              <el-form-item>

                      <el-button type="primary" round icon="el-icon-view" @click="toTest(pros.row.datasourceId)">测试数据源</el-button>

              </el-form-item>
            </el-form>
          </template>
        </el-table-column>

        <el-table-column prop="datasourceName" label="数据源名称"></el-table-column>

        <el-table-column prop="datasourceUsername" label="数据源用户名"></el-table-column>

        <el-table-column prop="datasourcePassword" label="数据源密码"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="pros">
            <el-button type="info" icon="el-icon-edit" circle @click="edit(pros.row.datasourceId)"></el-button>

      

            <el-button type="danger" icon="el-icon-delete" circle @click="toDelete(pros.row.datasourceId)"></el-button>


          </template>
        </el-table-column>
      </el-table>

      <el-pagination

        @current-change="loadData"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size.sync="size"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],

      total: 0,
      page: 1,
      size: 10
    };
  },

  mounted() {
    this.loadData();
  },

  methods: {
    loadData() {
      this.$axios
        .get("/datasource/list", { page: this.page, size: this.size })
        .then(data => {
          this.tableData = data.data.rows;
          this.total = data.data.total;
        })
        .catch(e => {});
    },

    edit(id) {
      this.$router.push({
        path: "/datasourceEdit",
        query: { type: "UPDATE", id: id }
      });
    },
    toTest(id) {

      this.$axios
        .get("/datasource/test?id=" + id)
        .then(d => {

          if(d.data.status){

            this.$notify({
              title: "成功",
              message: "测试成功",
              type: "success"
            });

          }else{

            this.$notify.error({
              title: "失败",
              message: d.data.message
            });
          }


        })
        .catch(e => {
       
          this.$notify.error({
            title: "失败",
            message: "数据源测试失败"
          });
        });
    },
    doDelete(id) {
      this.$axios
        .post("/datasource/deleteReport?id=" + id)
        .then(d => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success"
          });

          this.loadData();
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "数据源删除失败"
          });
        });
    },
    toDelete(id) {
      this.$confirm("此操作将删除数据源, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.doDelete(id);
        })
        .catch(() => {
          this.$notify.info({
            title: "消息",
            message: "删除已取消"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.datasource_container {
  height: 100%;
  width: 100%;
}

.main_layout {
  display: flex;
  flex-direction: column;
}
</style>

